{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
<style>
.selectable-example {padding: 10px;}
.selectable-example > .message {margin: -10px -10px 10px; background-color: #e5e5e5; padding: 8px 10px;}
#selectableExample1 > .tile {text-align: center; padding: 20px 0; background-color: #e5e5e5; margin: 10px; float: left; width: 70px; font-size: 20px;}
#selectableExample1 > .tile.active {background-color: #3280FC; color: #fff;}

#selectableExample3 {position: relative; height: 300px;}
#selectableExample3 > .shape {text-align: center; border: transparent 4px solid; background-color: #e5e5e5; position: absolute; font-size: 12px;}
#selectableExample3 > .shape.selected {border-color: #3280FC; background-color: #fff}
#shape-sqaure1 {width: 150px; height: 150px; line-height: 150px; left: 50%;}
#shape-sqaure2 {width: 100px; height: 100px; line-height: 100px; left: 20%; bottom: 10px}
#shape-sqaure3 {width: 80px; height: 120px; line-height: 120px; left: 0; bottom: 50px}
#shape-sqaure4 {width: 180px; height: 60px; line-height: 60px; left: 10%;}
#shape-circle1 {width: 70px; height: 70px; line-height: 70px; left: 35%; border-radius: 50%;}
#shape-circle2 {width: 100px; height: 100px; line-height: 100px; right: 20px; top: 50px; border-radius: 50%;}
#shape-circle3 {width: 160px; height: 60px; line-height: 60px; right: 10%; bottom: 50px; border-radius: 30px;}
@keyframes example-move-circle {
  0% { left: 0%; }
  100% { left: 80%; }
}
#shape-circle4 {width: 100px; height: 60px; line-height: 60px; left: 0%; bottom: 110px; border-radius: 30px; animation: example-move-circle 10s infinite alternate linear; box-shadow: 0 1px 6px rgba(50,128,252,.3);}
</style>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>拖拽选取</li>
  </ol>
<section class="demo-section">
<div id="pageContent">


<article><div class="alert alert-warning">
  <h4>兼容性提示</h4>
  <p>在触摸屏上无法支持拖拽范围选取功能，所以不支持多选，但仍然支持点选单个元素。</p>
</div></article>


<section>
  <header><h3>综合示例</h3></header>
  <article>
    <p>拖拽选取允许通过按住鼠标左键不放并拖动来选取范围内的元素。</p>
    <p>在目标元素上单击鼠标左键来选取或者取消选取元素</p><p>当再次拖选时会取消上选中的元素，如果按住 <kbd>Ctrl</kbd> 键的同时进行拖拽选取操作则不会取消上次选中的元素，这样就可以实现分批次多选。</p>
    <div class="clearfix selectable-example example" id="selectableExample1">
  <div class="message">用光标点击并拖拽选取下方的方块。</div>
    <div class="tile" data-id="1">1</div>
    <div class="tile" data-id="2">2</div>
    <div class="tile" data-id="3">3</div>
    <div class="tile" data-id="4">4</div>
    <div class="tile" data-id="5">5</div>
    <div class="tile" data-id="6">6</div>
    <div class="tile" data-id="7">7</div>
    <div class="tile" data-id="8">8</div>
    <div class="tile" data-id="9">9</div>
    <div class="tile" data-id="10">10</div>
    <div class="tile" data-id="11">11</div>
    <div class="tile" data-id="12">12</div>
    <div class="tile" data-id="13">13</div>
    <div class="tile" data-id="14">14</div>
    <div class="tile" data-id="15">15</div>
    <div class="tile" data-id="16">16</div>
    <div class="tile" data-id="17">17</div>
    <div class="tile" data-id="18">18</div>
    <div class="tile" data-id="19">19</div>
    <div class="tile" data-id="20">20</div>
    <div class="tile" data-id="21">21</div>
    <div class="tile" data-id="22">22</div>
    <div class="tile" data-id="23">23</div>
    <div class="tile" data-id="24">24</div>
    <div class="tile" data-id="25">25</div>
    <div class="tile" data-id="26">26</div>
    <div class="tile" data-id="27">27</div>
    <div class="tile" data-id="28">28</div>
    <div class="tile" data-id="29">29</div>
    <div class="tile" data-id="30">30</div>
    <div class="tile" data-id="31">31</div>
    <div class="tile" data-id="32">32</div>
    <div class="tile" data-id="33">33</div>
    <div class="tile" data-id="34">34</div>
    <div class="tile" data-id="35">35</div>
    <div class="tile" data-id="36">36</div>
</div>

<pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"selectableExample1"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">&gt;</span><span class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  ....
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="com">// 为选中的元素应用不同的外观样式</span><span class="pln">
</span><span class="com">#selectableExample1 &gt; .tile.active {</span><span class="pln">
  background</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln">
</span><span class="pun">}</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#selectableExample1'</span><span class="pun">).</span><span class="pln">selectable</span><span class="pun">({</span><span class="pln">
    selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'.tile'</span><span class="pun">,</span><span class="pln">
    select</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你选取了方块 #'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">id </span><span class="pun">+</span><span class="pln"> </span><span class="str">'，共选择了 '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">selected</span><span class="pun">.</span><span class="pln">length </span><span class="pun">+</span><span class="pln"> </span><span class="str">' 个。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>







<section><header><h3>选取不规则元素</h3></header><article><p>拖拽选取对待选取的目标元素并没有尺寸及位置要求，你可以应用在表格，列表或者任意形状的元素。通过 <code>selector</code> 来指定选择器来定义所有可能会被选中的元素。</p><div class="selectable-example example" id="selectableExample2">
  <div class="message">选取表格的行。</div>
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>积分</th>
        <th>排名</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="1526">
        <td>1526</td>
        <td>小马虎</td>
        <td>1056</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 1 </td>
      </tr>
      <tr data-id="1001">
        <td>1001</td>
        <td>勇敢的小鸭</td>
        <td>999</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 12 </td>
      </tr>
      <tr data-id="1045">
        <td>1045</td>
        <td>鸡大爷</td>
        <td>998</td>
        <td class="text-green"><i class="icon icon-double-angle-up"></i> 23 </td>
      </tr>
      <tr data-id="1025">
        <td>1025</td>
        <td>猪无畏</td>
        <td>860</td>
        <td class="text-green"><i class="icon icon-double-angle-down"></i> 25 </td>
      </tr>
      <tr data-id="1102">
        <td>1102</td>
        <td>糊涂虫</td>
        <td>749</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 30 </td>
      </tr>
    </tbody>
  </table>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#selectableExample2'</span><span class="pun">).</span><span class="pln">selectable</span><span class="pun">({</span><span class="pln">
    selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'tr'</span><span class="pun">,</span><span class="pln">
    select</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你选取了行 #'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">id </span><span class="pun">+</span><span class="pln"> </span><span class="str">'，共选择了 '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">selected</span><span class="pun">.</span><span class="pln">length </span><span class="pun">+</span><span class="pln"> </span><span class="str">' 个。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><div class="selectable-example example" id="selectableExample3">
  <div class="message">选取下方的图形</div>
  <div class="shape" id="shape-sqaure1" data-id="sqaure1">正方形1</div>
  <div class="shape" id="shape-sqaure2" data-id="sqaure2">正方形2</div>
  <div class="shape" id="shape-sqaure3" data-id="sqaure3">矩形1</div>
  <div class="shape" id="shape-sqaure4" data-id="sqaure4">矩形2</div>
  <div class="shape" id="shape-circle1" data-id="circle1">圆形1</div>
  <div class="shape" id="shape-circle2" data-id="circle2">圆形2</div>
  <div class="shape" id="shape-circle3" data-id="circle3">圆形3</div>
  <div class="shape" id="shape-circle4" data-id="circle4">圆形4</div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#selectableExample3'</span><span class="pun">).</span><span class="pln">selectable</span><span class="pun">({</span><span class="pln">
    selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'.shape'</span><span class="pun">,</span><span class="pln">
    selectClass</span><span class="pun">:</span><span class="pln"> </span><span class="str">'selected'</span><span class="pun">,</span><span class="pln">
    select</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'你选取了形状 #'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">id </span><span class="pun">+</span><span class="pln"> </span><span class="str">'，共选择了 '</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">selected</span><span class="pun">.</span><span class="pln">length </span><span class="pun">+</span><span class="pln"> </span><span class="str">' 个。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>



<section><header><h3>如何使用</h3></header><article><h4>引入资源</h4><p>拖拽选取为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/selectable/zui.selectable.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>设置目标元素 ID</h4><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"selectableExample1"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;</span><span class="pln">1</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">2</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tile"</span><span class="pln"> </span><span class="atn">data-id</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">&gt;</span><span class="pln">3</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  ....
</span><span class="tag">&lt;/div&gt;</span></code></pre><p>应该为所有可以被选中的目标元素设置 <code>[data-id]</code> 属性，这样便于跟踪哪些元素被选中。如果不设置 ID，则会生成随机的 ID 值。</p><h4>选项</h4><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 100px;">选项</th>
      <th style="width: 100px;">名称</th>
      <th style="width: 180px;">可选值</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>selector</code></td>
      <td>带选取目标元素选择器</td>
      <td>有效的 CSS 选择器字符串，默认值为 <code>"li,tr,div"</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>trigger</code></td>
      <td>拖拽点击事件触发选择器</td>
      <td>有效的 CSS 选择器字符串，默认值为 <code>null</code></td>
      <td>如果设置为null，则整个父级容器都可以触发拖选事件。</td>
    </tr>
    <tr>
      <td><code>selectClass</code></td>
      <td>被选中项的 CLASS</td>
      <td>默认值为 <code>active</code></td>
      <td>如果设置为 <code>''</code>，则不会为选中项添加 CLASS</td>
    </tr>
    <tr>
      <td><code>rangeStyle</code></td>
      <td>拖选时的矩形指示样式表</td>
      <td>默认为: <br> <pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="pun">{</span><span class="pln">
    border</span><span class="pun">:</span><span class="pln"> </span><span class="str">'1px solid #3280fc'</span><span class="pun">,</span><span class="pln">
    backgroundColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'rgba(50, 128, 252, 0.2)'</span><span class="pln">
</span><span class="pun">}</span></pre></td>
      <td>默认为蓝色边框，半透明矩形。</td>
    </tr>
    <tr>
      <td><code>clickBehavior</code></td>
      <td>点击选取行为</td>
      <td>
        <ul>
          <li><code>"toggle"</code>（默认）；</li>
          <li><code>"multi"</code>；</li>
          <li><code>"single"</code>。</li>
        </ul>
      </td>
      <td>
        <ul>
          <li><code>"toggle"</code>：单击目标元素，会切换其选择或非选择状态，每次选中（包括单击或拖拽）都会取消之前的所有选择（除非选择时按住了 <kbd>Ctrl</kbd> 键）；</li>
          <li><code>"multi"</code>：单击目标元素，会切换其选择或非选择状态，但不会取消之前的选择，拖拽选择会取消之前的所有选择（除非选择时按住了 <kbd>Ctrl</kbd> 键）；</li>
          <li><code>"single"</code>：单击目标元素会取消已选择的元素，并选中当前点击的元素，拖拽选择会取消之前的所有选择（除非选择时按住了 <kbd>Ctrl</kbd> 键）。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>mouseButton</code></td>
      <td>响应的鼠标按钮</td>
      <td>默认为 <code>'all'</code></td>
      <td>
        <p>所有可响应的鼠标按钮参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button" target="_blank"><code>MouseEvent.button</code></a>：</p>
        <ul>
          <li><code>'all'</code> 或 <code>-1</code>：响应所有鼠标按键；</li>
          <li><code>'left'</code> 或 <code>0</code>：响应鼠标左键；</li>
          <li><code>'middle'</code> 或 <code>1</code>：响应鼠标滚轮（中键）；</li>
          <li><code>'right'</code> 或 <code>2</code>：响应鼠标右键。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>ignoreVal</code></td>
      <td>范围选取时的忽略值</td>
      <td>默认值为<code>3</code>，单位为像素</td>
      <td>当鼠标一次拖选时移动的范围小于此值，则忽略此次拖选操作。</td>
    </tr>
    <tr>
      <td><code>listenClick</code></td>
      <td>是否监听鼠标单击事件</td>
      <td>默认值为<code>true</code></td>
      <td>如果设置为 <code>false</code>，则用户点击元素但没有拖拽操作时不会选中任何内容。</td>
    </tr>
    <tr>
      <td><code>start</code></td>
      <td>拖选开始之前的回调事件</td>
      <td>
        默认无设置，允许的回调函数形式为：<br>
        <pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span></pre>
      </td>
      <td>在此回调事件中返回 <code>false</code> 来取消此次拖选操作。</td>
    </tr>
    <tr>
      <td><code>finish</code></td>
      <td>单击或拖选结束时的回调事件</td>
      <td>
        默认无设置，允许的回调函数形式为：
        <pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span></pre>
      </td>
      <td>
        <code>data</code> 参数为一个对象，包含如下属性：
        <ul>
          <li><code>data.selections</code>：所有元素的选中或非选中状态，例如 <code>{1: true, 2: false, ...}</code>；</li>
          <li><code>data.selected</code>：所有已选中的元素 ID 值的数组，例如 <code>["1", "3"]</code>。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>select</code></td>
      <td>当有目标元素被选中时的回调事件</td>
      <td>
        默认无设置，允许的回调函数形式为：
        <pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span></pre>
      </td>
      <td>
        <code>data</code> 参数为一个对象，包含如下属性：
        <ul>
          <li><code>id</code>：当前正在被选中的目标元素 ID；</li>
          <li><code>data.selections</code>：所有元素的选中或非选中状态，例如 <code>{1: true, 2: false, ...}</code>；</li>
          <li><code>data.selected</code>：所有已选中的元素 ID 值的数组，例如 <code>["1", "3"]</code>。</li>
        </ul>
      </td>
    </tr>
    <tr>
      <td><code>unselect</code></td>
      <td>当有目标元素被取消选中时的回调事件</td>
      <td>
        默认无设置，允许的回调函数形式为：
        <pre style="padding: 5px; margin: 0px;" class="prettyprint prettyprinted"><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span></pre>
      </td>
      <td>
        <code>data</code> 参数为一个对象，包含如下属性：
        <ul>
          <li><code>id</code>：当前正在被取消选中的目标元素 ID；</li>
          <li><code>data.selections</code>：所有元素的选中或非选中状态，例如 <code>{1: true, 2: false, ...}</code>；</li>
          <li><code>data.selected</code>：所有已选中的元素 ID 值的数组，例如 <code>["1", "3"]</code>。</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table></div><h5>初始化和获取选中的元素</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> options </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'div'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// #selectable 内的所有 div 都可以进行选中</span><span class="pln">
    rangeStyle</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
      border</span><span class="pun">:</span><span class="pln"> </span><span class="str">'1px solid red'</span><span class="pln"> </span><span class="com">// 拖选范围指示矩形边框设置为红色</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    finish</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">  </span><span class="com">// 选择结束时的回调函数</span><span class="pln">
        </span><span class="com">// 所有元素的选中或非选中状态</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">data</span><span class="pun">.</span><span class="pln">selections</span><span class="pun">);</span><span class="pln">

        </span><span class="com">// 所有已选中的元素 ID 值的数组</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">data</span><span class="pun">.</span><span class="pln">selected</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">};</span><span class="pln">

$</span><span class="pun">(</span><span class="str">'#selectable'</span><span class="pun">).</span><span class="pln">selectable</span><span class="pun">(</span><span class="pln">options</span><span class="pun">);</span></code></pre><h4>方法</h4><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 120px;">方法</th>
      <th style="width: 200px;">参数</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>toggle()</code></td>
      <td></td>
      <td>切换选中或取消选中所有目标元素。</td>
    </tr>
    <tr>
      <td><code>toggle(elementOrId)</code></td>
      <td><code>elementOrId</code>：要切换显示的目标元素或者其 id。</td>
      <td>切换指定目标元素的选中或取消选中状态。</td>
    </tr>
    <tr>
      <td><code>select()</code></td>
      <td></td>
      <td>选中所有目标元素。</td>
    </tr>
    <tr>
      <td><code>select(elementOrId)</code></td>
      <td><code>elementOrId</code>：要选中的目标元素或其 id。</td>
      <td>选中指定目标元素。</td>
    </tr>
    <tr>
      <td><code>unselect()</code></td>
      <td></td>
      <td>取消选中所有目标元素。</td>
    </tr>
    <tr>
      <td><code>unselect(elementOrId)</code></td>
      <td><code>elementOrId</code>：要取消选中的目标元素或其 id。</td>
      <td>取消选中指定目标元素。</td>
    </tr>
    <tr>
      <td><code>syncSelectionsFromClass()</code></td>
      <td></td>
      <td>从元素的 class 同步选中和非选中状态。</td>
    </tr>
  </tbody>
</table></div><h5>调用方法</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 初始化</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#selectable'</span><span class="pun">).</span><span class="pln">selectable</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 获取 selectable 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> mySelectable </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#selectable'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.selectable'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用方法全选方法</span><span class="pln">
mySelectable</span><span class="pun">.</span><span class="pln">select</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 选中 id 为 1030 的目标元素</span><span class="pln">
mySelectable</span><span class="pun">.</span><span class="pln">select</span><span class="pun">(</span><span class="str">'1030'</span><span class="pun">);</span></code></pre></article></section>




<section>
  <header><h3>数据表格</h3></header><article><p>ZUI 中的 <a href="#view/datatable">数据表格</a> 现已支持拖拽选择，只需要在数据表格中的 <code>selectable</code> 选项设置为 <code>true</code> 即可，或者将该选项直接设置为 <code>selectable</code> 所支持的选项对象。</p><div class="selectable-example example">
  <div class="message">为数据表格启用拖拽选择。</div>
  <table class="table" id="selectableDatableExample" data-datatable-id="datatable-selectableDatableExample" style="display: none;">
    <thead>
      <tr>
        <th>ID</th>
        <th class="flex-col">名称</th>
        <th class="flex-col">积分</th>
        <th>排名</th>
      </tr>
    </thead>
    <tbody>
      <tr data-id="1526">
        <td>1526</td>
        <td>小马虎</td>
        <td>1056</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 1 </td>
      </tr>
      <tr data-id="1001">
        <td>1001</td>
        <td>勇敢的小鸭</td>
        <td>999</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 12 </td>
      </tr>
      <tr data-id="1045">
        <td>1045</td>
        <td>鸡大爷</td>
        <td>998</td>
        <td class="text-green"><i class="icon icon-double-angle-up"></i> 23 </td>
      </tr>
      <tr data-id="1025">
        <td>1025</td>
        <td>猪无畏</td>
        <td>860</td>
        <td class="text-green"><i class="icon icon-double-angle-down"></i> 25 </td>
      </tr>
      <tr data-id="1102">
        <td>1102</td>
        <td>糊涂虫</td>
        <td>749</td>
        <td class="text-red"><i class="icon icon-double-angle-up"></i> 30 </td>
      </tr>
    </tbody>
  </table><div class="datatable show-scroll-slide" id="datatable-selectableDatableExample"><div class="datatable-head"><div class="datatable-head-span datatable-span fixed-left" style="width: 30%;"><div class="datatable-wrapper"><table class="table table-datatable table-hover"><thead><tr class="datatable-row datatable-row-left"><th data-index="check" class="check-all check-btn"><i class="icon-check-empty"></i></th><th class="datatable-head-cell" data-index="0" data-type="string" style="width: auto; min-height: 36px; height: 36px;">ID</th></tr></thead></table></div></div><div class="datatable-head-span datatable-span flexarea"><div class="datatable-wrapper"><table class="table table-datatable table-hover" style="left: 0px; min-width: 1074px;"><thead><tr class="datatable-row datatable-row-flex"><th class="datatable-head-cell flex-col" data-index="1" data-type="string" style="width: auto; min-height: 36px; height: 36px;">名称</th><th class="datatable-head-cell flex-col" data-index="2" data-type="string" style="width: auto; min-height: 36px; height: 36px;">积分</th></tr></thead></table><div class="scrolled-shadow scrolled-in-shadow"></div><div class="scrolled-shadow scrolled-out-shadow"></div></div></div><div class="datatable-head-span datatable-span fixed-right" style="width: 30%;"><div class="datatable-wrapper"><table class="table table-datatable table-hover"><thead><tr class="datatable-row datatable-row-right"><th class="datatable-head-cell" data-index="3" data-type="string" style="width: auto; min-height: 36px; height: 36px;">排名</th></tr></thead></table></div></div></div><div class="datatable-rows"><div class="datatable-rows-span datatable-span fixed-left" style="width: 30%;"><div class="datatable-wrapper"><table class="table table-datatable table-hover"><tbody><tr class="datatable-row datatable-row-left" data-index="0" data-id="1526"><td data-index="check" class="check-row check-btn"><i class="icon-check-empty"></i></td><td class="datatable-cell" colspan="1" data-row="0" data-index="0" data-flex="false" data-type="string" title="" style="width: auto; min-height: 36px; height: 36px;">1526</td></tr><tr class="datatable-row datatable-row-left" data-index="1" data-id="1001"><td data-index="check" class="check-row check-btn"><i class="icon-check-empty"></i></td><td class="datatable-cell" colspan="1" data-row="1" data-index="0" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">1001</td></tr><tr class="datatable-row datatable-row-left" data-index="2" data-id="1045"><td data-index="check" class="check-row check-btn"><i class="icon-check-empty"></i></td><td class="datatable-cell" colspan="1" data-row="2" data-index="0" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">1045</td></tr><tr class="datatable-row datatable-row-left" data-index="3" data-id="1025"><td data-index="check" class="check-row check-btn"><i class="icon-check-empty"></i></td><td class="datatable-cell" colspan="1" data-row="3" data-index="0" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">1025</td></tr><tr class="datatable-row datatable-row-left" data-index="4" data-id="1102"><td data-index="check" class="check-row check-btn"><i class="icon-check-empty"></i></td><td class="datatable-cell" colspan="1" data-row="4" data-index="0" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">1102</td></tr></tbody></table></div></div><div class="datatable-rows-span datatable-span flexarea"><div class="datatable-wrapper"><table class="table table-datatable table-hover" style="left: 0px; min-width: 1074px;"><tbody><tr class="datatable-row datatable-row-flex" data-index="0" data-id="1526"><td class="datatable-cell" colspan="1" data-row="0" data-index="1" data-flex="false" data-type="string" title="" style="width: auto; min-height: 36px; height: 36px;">小马虎</td><td class="datatable-cell" colspan="1" data-row="0" data-index="2" data-flex="false" data-type="string" title="" style="width: auto; min-height: 36px; height: 36px;">1056</td></tr><tr class="datatable-row datatable-row-flex" data-index="1" data-id="1001"><td class="datatable-cell" colspan="1" data-row="1" data-index="1" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">勇敢的小鸭</td><td class="datatable-cell" colspan="1" data-row="1" data-index="2" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">999</td></tr><tr class="datatable-row datatable-row-flex" data-index="2" data-id="1045"><td class="datatable-cell" colspan="1" data-row="2" data-index="1" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">鸡大爷</td><td class="datatable-cell" colspan="1" data-row="2" data-index="2" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">998</td></tr><tr class="datatable-row datatable-row-flex" data-index="3" data-id="1025"><td class="datatable-cell" colspan="1" data-row="3" data-index="1" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">猪无畏</td><td class="datatable-cell" colspan="1" data-row="3" data-index="2" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">860</td></tr><tr class="datatable-row datatable-row-flex" data-index="4" data-id="1102"><td class="datatable-cell" colspan="1" data-row="4" data-index="1" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">糊涂虫</td><td class="datatable-cell" colspan="1" data-row="4" data-index="2" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;">749</td></tr></tbody></table><div class="scrolled-shadow scrolled-in-shadow"></div><div class="scrolled-shadow scrolled-out-shadow"></div></div></div><div class="datatable-rows-span datatable-span fixed-right" style="width: 30%;"><div class="datatable-wrapper"><table class="table table-datatable table-hover"><tbody><tr class="datatable-row datatable-row-right" data-index="0" data-id="1526"><td class="datatable-cell text-red" colspan="1" data-row="0" data-index="3" data-flex="false" data-type="string" title="" style="width: auto; min-height: 36px; height: 36px;"><i class="icon icon-double-angle-up"></i> 1 </td></tr><tr class="datatable-row datatable-row-right" data-index="1" data-id="1001"><td class="datatable-cell text-red" colspan="1" data-row="1" data-index="3" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;"><i class="icon icon-double-angle-up"></i> 12 </td></tr><tr class="datatable-row datatable-row-right" data-index="2" data-id="1045"><td class="datatable-cell text-green" colspan="1" data-row="2" data-index="3" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;"><i class="icon icon-double-angle-up"></i> 23 </td></tr><tr class="datatable-row datatable-row-right" data-index="3" data-id="1025"><td class="datatable-cell text-green" colspan="1" data-row="3" data-index="3" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;"><i class="icon icon-double-angle-down"></i> 25 </td></tr><tr class="datatable-row datatable-row-right" data-index="4" data-id="1102"><td class="datatable-cell text-red" colspan="1" data-row="4" data-index="3" data-flex="false" data-type="string" title="" style="width: auto; min-height: 37px; height: 37px;"><i class="icon icon-double-angle-up"></i> 30 </td></tr></tbody></table></div></div></div><div class="scroll-wrapper"><div class="scroll-slide scroll-pos-in" style="width: 430px; left: 322px;"><div class="bar" style="left: 0px; width: 170px;"></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-javasript"><span class="pln">$</span><span class="pun">(</span><span class="str">'#selectableDatableExample'</span><span class="pun">).</span><span class="pln">datatable</span><span class="pun">({</span><span class="pln">
    checkable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 启用数据表格的选中功能</span><span class="pln">
    selectable</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">    </span><span class="com">// 设置拖拽选择的选项</span><span class="pln">
        finish</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'当前选中的行数：'</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">selected</span><span class="pun">.</span><span class="pln">length</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><link href="__ZUI__/lib/datatable/zui.datatable.min.css" rel="stylesheet"></article></section></div>
</section>
{/block}

{block name="script"}
<script src="__ZUI__/lib/datatable/zui.datatable.min.js"></script>

<script src="__ZUI__/lib/selectable/zui.selectable.min.js"></script>
<script>
$(function() {
    var onTileSelect = function(e, that, a) {
      this.$.children('.message').html('你选取了 <strong>#' + e.id + '</strong>，共选择了 <strong>' + e.selected.length + '</strong> 个。');
    };

    var $example1 = $('#selectableExample1');
    for(var i = 0; i < 36; ++i) {
        $example1.append('<div class="tile" data-id="' + (i + 1) + '">' + (i + 1) + '</div>');
    }
    $example1.selectable({
        selector: '.tile',
        clickBehavior: 'single',
        select: onTileSelect,
        unselect: onTileSelect
    });

    $('#selectableExample2').selectable({
        selector: 'tr',
        select: onTileSelect,
        unselect: onTileSelect
    });

    $('#selectableExample3').selectable({
        selectClass: 'selected',
        selector: '.shape',
        select: onTileSelect,
        unselect: onTileSelect
    });

    $('#selectableDatableExample').datatable({
        checkable: true,
        selectable: {
            finish: function(e) {
                $('#selectableDatableExample').prev('.message').html('你共选择了 <strong>' + e.selected.length + '</strong> 个。');
            }
        }
    });
});
</script>
{/block}